<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" import="java.util.*"%>
<!DOCTYPE html>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>

<head>
    <title>阅读海洋</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" type="text/css" href="ReadingOcean/resources/forum/css/forumIndex.css">
</head>

<body class="forum">

<style>
    .catNav a{
        color: black;
        text-decoration: none;
    }
    .catNav a.active{
        color: #fff;
        text-decoration: none;
    }
</style>

<%@include file="common.jsp" %>

<div class="main">
    <div class="search">
        <form action="book" method="get" accept-charset="utf-8">
            <input type="search" name="keyword" placeholder="书名搜索" required>
            <button type="submit"></button>
        </form>
    </div>

    <div class="catNav">
        <li><a href="?keyword=${keyword}&category=default&start=0">全部</a></li>
        <li><a href="?keyword=${keyword}&category=hb&start=0">绘本</a></li>
        <li><a href="?keyword=${keyword}&category=th&start=0">童话</a></li>
        <li><a href="?keyword=${keyword}&category=xs&start=0">小说</a></li>
        <li><a href="?keyword=${keyword}&category=mz&start=0">名著</a></li>
    </div>

    <div class="topics">
        <c:forEach items="${books}" var="book" varStatus="bk">
            <div class="topic">
                <img src="${book.cover}"
                     alt="book">
                <ul>
                    <li><a href="review?bk_id=${book.id}&category=all&start=0">${book.name}</a></li>
                    <li><span>讨论: ${book.discuss}</span> <span>点赞: ${book.like}</span></li>
                </ul>
            </div>
        </c:forEach>
        <script>
            $('.topic').click(function (event) {
                $(this).find('a')[0].click();
            });
        </script>
    </div>
</div>

<div class="mypager">
    <a href="?keyword=${keyword}&category=${bookcategory}&start=0">首  页</a>
    <a href="?keyword=${keyword}&category=${bookcategory}&start=${pre}">上一页</a>
    <a href="?keyword=${keyword}&category=${bookcategory}&start=${next}">下一页</a>
    <a href="?keyword=${keyword}&category=${bookcategory}&start=${last}">末  页</a>
</div>

<script>
    window.onload = function () {
        var loc = window.location.href;
        loc = loc.substring(loc.indexOf("category")+"category=".length, loc.lastIndexOf("&"));
        switch (loc) {
            case "hb":
                $('.catNav a').eq(1).addClass('active');
                $('.catNav a').eq(1).parent().addClass('current');
                break;
            case "th":
                $('.catNav a').eq(2).addClass('active');
                $('.catNav a').eq(2).parent().addClass('current');
                break;
            case "xs":
                $('.catNav a').eq(3).addClass('active');
                $('.catNav a').eq(3).parent().addClass('current');
                break;
            case "mz":
                $('.catNav a').eq(4).addClass('active');
                $('.catNav a').eq(4).parent().addClass('current');
                break;
            default:
                $('.catNav a').eq(0).addClass('active');
                $('.catNav a').eq(0).parent().addClass('current');
                break;
        }
    }
</script>
<%--<script src="ReadingOcean/resources/forum/js/forumIndex_dynamic.js"></script>--%>
</body>

</html>